<template>
    <div>
        <a-modal
         v-model:visible="processesVisible" 
         :title="formData.modalTitle"
         width="70%"
        >
            <div :key="processesKey">
            {{ formData.processesName }}
                <div v-if="formData.processesName == '原料供应'">
                    <commpVxeTable
                    :config="dataTableConfig" 
                    :columns="columnsVxe" 
                    :formItem="[]"
                    :tableData="tableData"
                    :adaptiveHeight="true"
                    ref="acceptanceRegistrationRef"
                    >
                        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                            <a-form layout="inline" class="search-form" >
                                <a-form-item >
                                    <a-button class="blue-btn" type="primary" @click="detailClick(row)">详情</a-button>
                                </a-form-item>
                            </a-form>
                        </template>
                    </commpVxeTable>
                </div>
                <div v-if="formData.processesName == '检验记录'">
                    <commpVxeTable
                    :config="dataTableConfig" 
                    :columns="columnsVxe1" 
                    :formItem="[]"
                    :tableData="tableData1"
                    :adaptiveHeight="true"
                    ref="acceptanceRegistrationRef"
                    >
                        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                            <a-form layout="inline" class="search-form" >
                                <a-form-item >
                                    <a-button class="blue-btn" type="primary" @click="detailClick(row)">详情</a-button>
                                </a-form-item>
                            </a-form>
                        </template>
                    </commpVxeTable>
                </div>
                <div v-if="formData.processesName == '工艺验证'">
                    <commpVxeTable
                            :key="refreshTable"
                            ref="headmanVxeTable"
                            :config="{
                                api:assessCheckApi.spcyQyInfoQuerySbqrxxPageList,
                                rowId: 'id',
                                height:400,
                                autoHidden:true,
                            }" 
                            :tableData="technologyData"
                            :columns="technologyColumnsVxe" 
                            :formItem="[]"
                            :adaptiveHeight="true"
                    > 
                    </commpVxeTable>
                </div>
            </div>
            <template slot="footer">
                <div>
                    <a-button @click="handleCancel" style="margin-right: 10px;">关闭</a-button>
                    <a-button v-if="false" @click="handleOk" type='primary'>确定</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            assessCheckApi:assessCheckApi,
            processesKey:null,
            formData:{},
            processesVisible:false,
            tableData:[{
                materialName:'无水葡萄糖',
                specifications:'25kg/袋',
                purchaseQuantity:'1500公斤',
                remainingQuantity:'1000公斤',
                purchaseTime:'2023-05-06',
                batchNumber:'20230121',
                supplier:'石药集团圣雪葡萄糖有限责任公司',
                id:'material1'
            }],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                fywflcode:'001002',
                height:400,
                autoHidden:true,
                pageSize:100,
                paramet:{
                    onlyCurrentUser:false,
                    fblzt:'待办'
                }
            },
            columnsVxe:[
            // { 
            //     type: 'checkbox', 
            //     width: 60 ,
            //     fixed: 'left'
            // },
            {
                title: '原料名称', 
                field: 'materialName',
            },{
                title: '规格',
                field: 'specifications',
            },{
                title: '购进数量',
                field: 'purchaseQuantity',
            },{
                title: '剩余数量',
                field: 'remainingQuantity',
            },{
                title: '购进时间',
                field: 'purchaseTime',
            },{
                title: '批号',
                field: 'batchNumber',
            },{
                title: '供应商',
                field: 'supplier',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:100,
            }],
            columnsVxe1:[
            // { 
            //     type: 'checkbox', 
            //     width: 60 ,
            //     fixed: 'left'
            // },
            {
                title: '报告编号', 
                field: 'materialName',
            },{
                title: '报告日期',
                field: 'specifications',
            },{
                title: '签发人',
                field: 'purchaseQuantity',
            },{
                title: '报告附件',
                field: 'remainingQuantity',
            }],
            tableData1:[{
                materialName:'ZJ20230001',
                specifications:'2023-5-6',
                purchaseQuantity:'吴一凡',
                remainingQuantity:'葡萄糖注射液报告.pdf',
                id:'material1'
            }],
            technologyData:[{
                forder:1,
                fyzmc:'中针线培养基模拟灌装试验',
                fyzfabh:'SOP-VM-11-3009-23',
                fyzbgbh:'R-VM-11-3009-23',
                fbz:'',
                id:1,
            }],
            technologyColumnsVxe:[{
                title: '序号', //列头显示文字
                field: 'forder',
                width:60
            },{
                title: '验证名称', //列头显示文字
                field: 'fyzmc',
            },{
                title: '验证方案编号', //列头显示文字
                field: 'fyzfabh',
            },{
                title: '验证报告编号', //列头显示文字
                field: 'fyzbgbh',
            },{
                title: '附件', //列头显示文字
                field: 'fbz',
            }],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.formData = val
            this.processesKey = Date.now()
        },
        handleCancel(){
            this.processesVisible = false
        },
        handleOk(){
            this.processesVisible = false
        },
        detailClick(row){
            this.$message.warning('开发中，敬请期待！')
        },
    }
}
</script>